<template>
  <div class="students-page">
     <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="工号">
          <el-input v-model="searchForm.teacher_id" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" :icon="Search" @click="searchAction">查询</el-button>
      </el-col>
    </el-row>
    <div>
      <el-button type="primary" :icon="Plus" style="margin-bottom: 10px;" @click="addTeacherAction">新增</el-button>
       <el-table :data="tableData" border  style="width: 100%" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666', fontWeight: 'bold', textAlign: 'center'}">
        <el-table-column prop="teacher_id" label="工号" align="center"/>
        <el-table-column prop="name" label="姓名" align="center"/>
        <el-table-column prop="gender" label="性别" align="center" />
        <el-table-column prop="phone" label="电话"  align="center" width="100">
          <template #default="scope">
            <span>{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7, 11)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="is_head_teacher" label="是否班主任"  align="center" width="100">
          <template #default="scope">
            <span>{{ scope.row.is_head_teacher ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="140px">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

     <el-dialog
        v-model="dialogVisible"
        :title="isAdd ? '新增' : '修改'"
        width="400"
      >
         <el-form
            ref="ruleFormRef"
            :model="formInfo"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item label="工号" prop="teacher_id">
              <el-input v-model="formInfo.teacher_id" placeholder="工号" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formInfo.name" placeholder="姓名" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="formInfo.gender" placeholder="选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formInfo.phone" placeholder="手机号" />
            </el-form-item>
            <el-form-item label="班主任" prop="is_head_teacher">
              <el-select v-model="formInfo.is_head_teacher" placeholder="请选择">
                <el-option label="否" value="0" />
                <el-option label="是" value="1" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)">
               {{ isAdd ? '新增' : '修改'}}
            </el-button>
          </el-form-item>
      </el-dialog>
  </div>
</template>

<script setup>
import { addTeacher, deleteTeacher, getAllTeacher, updateTeacher } from '@/api';
import { validatePhone } from '@/utils/validator';
import { Plus, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { nextTick, ref } from 'vue';

const searchForm = ref({
  student_id: '',
  name: '',
})

const tableData = ref([
  {
    teacher_id: '001',
    name: '张三',
    gender: '男',
    phone: '1234567890',
    is_head_teacher: '0'
  }
])

// 获取所有老师
const getTableData = () => {
  getAllTeacher().then(res => {
    // tableData.value = res.data
    console.log(res);
    tableData.value = res
  })
}

getTableData()


// 查询
const searchAction = () => {
  // 过滤tableData
  // const res = tableData.value.filter(item => {
  //   return item.teacher_id.includes(searchForm.value.teacher_id) && item.name.includes(searchForm.value.name)
  // })
  // tableData.value = res
  getAllTeacher().then(res => {
    tableData.value = res.filter(item => {
      return item.teacher_id.includes(searchForm.value.teacher_id) && item.name.includes(searchForm.value.name)
    })
  })
}


// name,teacher_id,gender('男'，'女'),phone,is_head_teacher('0','1')
/************** 新增 ****************/
const dialogVisible = ref(false)
const ruleFormRef = ref(null)
const isAdd = ref(true)

const addTeacherAction = () => {
  isAdd.value = true
  dialogVisible.value = true
  nextTick(() => {
    if (ruleFormRef.value) {
      ruleFormRef.value.resetFields()
    } 
  })
  
}

const formInfo = ref({
  teacher_id: '',
  name: '',
  gender: '男',
  phone: '',
  is_head_teacher: '0',
})

const validatePhoneNum = (rule, value, callback) => {
  const res =  validatePhone(value)
  if (res) {
    callback()
  } else {
    callback(new Error('请输入正确的手机号'))
  }
}

const rules = ref({
  teacher_id: [
    { required: true, message: '请输入工号', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' },
  ],
  phone:[
    { required: true, validator: validatePhoneNum, trigger: 'blur' },
  ],
  is_head_teacher:[
    { required: true, message: '请选择是否是班主任', trigger: 'change' },
  ]
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (isAdd.value) {
        addTeacherInfo()
      } else {
        updateTeacherInfo()
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const addTeacherInfo = () => {
  addTeacher(formInfo.value).then(res => {
    console.log(res);
    ElMessage.success('新增成功')
    getTableData()
    ruleFormRef.value.resetFields()
    dialogVisible.value = false
  })
}

/************** 编辑 ****************/

const handleEdit = (row) => {
  isAdd.value = false
  formInfo.value = row
  dialogVisible.value = true
}

const updateTeacherInfo = () => {
  updateTeacher(formInfo.value.id, formInfo.value).then(res => {
    console.log(res);
    ElMessage.success('修改成功')
    getTableData()
    ruleFormRef.value.resetFields()
    dialogVisible.value = false
    isAdd.value = true
  })
}

/************** 删除 ****************/
const handleDelete = (row) => {
  console.log(row);
  deleteTeacher(row.id).then(res => {
    console.log(res);
    ElMessage.success('删除成功')
    getTableData()
  })
}
</script>

<style lang="scss" scoped>

</style>